<template>
	<view class="booking">
		<navBar id="navBar" />
		<!-- 返回 -->
		<Nav title="合同单" filtertitle="合同单查询" :data="filterData" :form.sync="filterForm" :inpdata="inputData" @finsh='onFinshData' />
		<!-- <view class="titles">在线预约</view> -->
		 <!-- <text>当前滚动高度：{{ scrollTop }}px</text> -->
		<!-- 我的意向单 -->
		<scroll-view class="mybook" scroll-y="true">
			<view class="bkitem" v-for="(item,index) in ContractList" :key="index">
				<view class="bkrol">
					合同编号：<text class="sheetc">{{ item.contractCode }}</text>
				</view>
				<view class="bkrol">
					项目：<text class="titls">{{ item.project }}</text>
				</view>
				<view class="bkrol">
					<text class="colors">签订时间：<text class="date">{{ $getRelativeTime(item.signingTime) }}</text></text>
				</view>
				<view class="bkrol">
					<text class="colors">到期时间：<text class="date">{{ $getRelativeTime(item.maturityTime) }}</text></text>
				</view>
				<view class="bkrol bkdjs">
					<text class="colors">状态：<text class="status">{{ item.status }}</text></text>
					<text class="colors">金额：<text class="mount">{{ item.contractAmount }}</text></text>
				</view>
				<uni-collapse ref="collapse">
					<uni-collapse-item title="附件：" >
						<view class="bkdjs pd10" v-for="(atts,indexs) in item.attach" :key="indexs">
							<text>{{ atts.attName }}</text>
							<view class="controls">
								<text class="rolsl" @click="preview(atts.attURL)">预览</text>
								<text @click="download(atts.attURL)">下载</text>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view class="toolbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	// 引入api
	import { 
		getProgramContractInfo // 合同单查询
	} from "@/proxy/program/program.api.js";
	import {
		FileHandler
	} from "@/utils/fileHandler";
	export default {
		data(){
			return{
				ContractList:[],
				filterForm: {},
				inputData: [
				  	{
				  		title: "合同编号",
				  		placeholder:"请输入合同编号",
				  		inpValue:"",
				  		key: "contractCode", //键名 接收对象名字
				  	},
				  	{
				  		title: "业务员名称",
				  		placeholder:"请输入业务员名称",
				  		inpValue:"",
				  		key: "businessMan", //键名 接收对象名字
				  	},
				  	{
				  		title: "制单人",
				  		placeholder:"请输入制单人",
				  		inpValue:"",
				  		key: "documenter", //键名 接收对象名字
				  	},
				  ],
				  filterData: [
					  {
					  	children: false, //是否有子项
					  	title: "合同状态",
					  	key: "status", //键名 接收对象名字
					  	keyValue: "value", //获取的值是哪个
					  	isRadio: true, //是否单选 否则多选
					  	data: [
					  		{
					  			title: "草稿",
					  			id: 1,
					  			value: 'Draft',
					  		},
					  		{
					  			title: "负责人审核中",
					  			id: 2,
					  			value: 'ApprovalOfPrincipal',
					  		},
					  		{
					  			title: "法务审核中",
					  			id: 3,
					  			value: 'ApprovalOfLegal',
					  		},
					  		{
					  			title: "财务审核中",
					  			id: 4,
					  			value: 'ApprovalOfFinance',
					  		},
					  		{
					  			title: "高层管理审核中",
					  			id: 5,
					  			value: 'ApprovalOfTopManager',
					  		},
					  		{
					  			title: "签署中",
					  			id: 6,
					  			value: 'Signing',
					  		},
					  		{
					  			title: "完成",
					  			id: 7,
					  			value: 'Done',
					  		},
							{
								title: "废弃",
								id: 8,
								value: 'Abolish',
							},
							{
								title: "停用",
								id: 9,
								value: 'Cancel',
							}
					  	],
					  }
				  ]
			}
		},
		async mounted() {
			await this.getProgramContractInfoData(); // 获取合同单
		},
		methods:{
			// 筛选后的值
			async onFinshData(data) {
				// console.log('父组件接收子组件返回的筛选值', data)
				await this.getProgramContractInfoData(data.contractCode,data.businessMan,data.documenter,data.status); // 获取合同单
			},
			pathSplice(filePath){
				let startIndex = 5;  // 开始位置
				let endIndex = filePath.length - 4;    // 结束位置
				// 提取前后部分，拼接替换内容
				let newStr = filePath.slice(0, startIndex) + "************" + filePath.slice(endIndex);
				return newStr;
			},
			// 获取合同单查询
			async getProgramContractInfoData(contractCode,businessMan,documenter,status){
				const { customerCode } = uni.getStorageSync("userInfo");
				if(!customerCode){
					return this.$toast({
					  title: "请前往小程序授权登录",
					  // icon: "error",
					});
				}
				// 发送请求
				try {
				  const result = await getProgramContractInfo([{
					 customerCode: customerCode,
					 contractCode: contractCode,
					 businessMan: businessMan,
					 documenter: documenter,
					 status: status,
				  }]);
				  if (result.code == 200) {
					  this.ContractList = result.data;
				      // console.log("合同单查询成功！！！",result);
				  } else {
				    return this.$toast({
				      title: result.data.msg,
				    });
				  }
				} catch (error) {
				  console.error("请求失败", error);
				  return this.$toast({
				    title: "请求失败",
				    icon: "error",
				  });
				}
			},
			preview(filePath){				FileHandler.preview(filePath);  // 调用预览方法			},
			download(filePath){				FileHandler.download(filePath);  // 调用下载方法			}
		}
	}
</script>

<style lang="scss">
	// page{
		// background-color: rgb(249,250,251);
		// height: 100vh;
	// }
	/* app端 */
	/* #ifdef APP-PLUS || H5 */
	#app,
	/* #endif */
	page {
	  background-color: #F9FAFB;
	  height: 100%;
	}
	.booking{
		display: flex;
		flex-direction: column;
		height: 100vh;
		// height: 100vh;
		// background-color: rgb(249,250,251);
		.mybook{
			// margin: 20rpx;
			flex: 1;
			overflow-y: auto;
			width: auto;
			.bkitem{
				padding: 0 20rpx 20rpx 20rpx;
				font-size: 25rpx;
				margin: 20rpx;
				background-color: #fff;
				border-radius: 15rpx;
				// box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.1);
				box-shadow: #bbb 0 0 8rpx;
				// border-bottom: 1rpx solid #f4f4f4;
				.bkdjs{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.controls{
						color: #0081ff;
						.rolsl{
							margin-right: 10rpx;
						}
					}
					.status{
						color: #FFF;
						background: #FF0000;
						padding: 5rpx 10rpx;
						border-radius: 10rpx;
					}
					.mount{
						color: #FF0000;
						font-size: 30rpx;
						font-weight: bold;
					}
					.colors{
						color: #6C7381;
						.date{
							color: #000;
						}
					}
				}
				.bkdj{
					display: flex;
				}
				.pd10{
					padding: 10rpx 0;
				}
				.bkrol{
					// height: 60rpx;
					// line-height: 60rpx;
					padding: 10rpx 0;
					.sheetc{
						font-size: 30rpx;
						font-weight: bold;
					}
					.titls{
						font-size: 28rpx;
						font-weight: bold;
					}
				}
				.controls{
					color: #0081ff;
					margin-left: auto;
					.rolsl{
						margin-right: 10rpx;
					}
				}
			}
		}
	}
	.uni-collapse-item__title-wrap > .uni-collapse-item__title-box{
		height: unset !important;
		min-height: 60rpx !important;
		line-height: 60rpx !important;
		padding: 0rpx !important;
	}
	.uni-collapse-item__title-text{
		font-size: 25rpx !important;
	}
	// 底部占位空盒子
	.toolbar-height {
		height: 20rpx;
	}
</style>